<!-- 治理编排图形化编排页 -->
<template>
  <div class="rule-orchestration">
    <!-- 左侧算子库 -->
    <div class="sidebar">
      <SidebarWithOperatorLibrary />
    </div>

    <!-- 右侧可视化编排区域 -->
    <div class="canvas-area">
      <CanvasArea />
    </div>
  </div>
</template>

<script>
import SidebarWithOperatorLibrary from './components/SidebarWithOperatorLibrary.vue';
import CanvasArea from './components/CanvasArea.vue';

export default {
  name: 'RuleOrchestration',
  components: {
    SidebarWithOperatorLibrary,
    CanvasArea
  },
  data() {
    return {
      // 如果需要一些全局状态管理，可以在这里定义
    };
  },
  mounted() {
    // 页面加载时可以执行的一些初始化操作
    this.initialize();
  },
  methods: {
    initialize() {
      // 初始化逻辑，例如从 store 中获取数据等
      this.$store.dispatch('operators/fetchOperators');
    }
  }
};
</script>

<style scoped>
.rule-orchestration {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 300px;
  background-color: #f5f7fa;
  border-right: 1px solid #e6e6e6;
  overflow-y: auto;
}

.canvas-area {
  flex: 1;
  padding: 20px;
  background-color: #ffffff;
}
</style>
